import { memo, useEffect, useRef, useState } from "react";
import { init } from "echarts";
import classNames from "classnames";

interface Props {
  className?: string;
  style?: object;
  fontSize?: number;
  value: number;
}

const defaultProps = {
  className: "",
  style: {},
  fontSize: 14,
  value: 0
};
function Battery(props: Props = defaultProps) {
  const domRef = useRef(null);
  const [chart, setChart] = useState();

  const { className, style, fontSize = 14, value = 0 } = props;

  const initChart = () => {
    const { clientWidth, clientHeight } = domRef.current;
    const size = [clientWidth, clientHeight];
    const lineWidth = size[1] * 0.1;
    const instance = init(domRef.current, "default");
    instance.setOption({
      graphic: [
        {
          type: "rect",
          shape: {
            x: lineWidth / 2,
            y: lineWidth / 2,
            width: size[0] - lineWidth - lineWidth,
            height: size[1] - lineWidth,
            r: 8
          },
          style: {
            fill: "rgba(0, 0, 0, 0)",
            stroke: "#000",
            lineWidth: lineWidth
          }
        },
        {
          type: "rect",
          shape: {
            x: size[0] - lineWidth,
            y: size[1] / 2 - size[1] / 2 / 2,
            width: lineWidth,
            height: size[1] / 2,
            r: [0, 4, 4, 0]
          },
          style: {
            fill: "#000",
            stroke: "#000",
            lineWidth: 2
          }
        }
      ],
      xAxis: {
        show: false
      },
      yAxis: {
        show: false
      }
    });
    window.addEventListener("resize", function () {
      instance.resize();
    });
    setChart(instance);
  };

  const updateValue = (value) => {
    const { clientWidth, clientHeight } = domRef.current;
    const size = [clientWidth, clientHeight];
    const lineWidth = size[1] / 10;

    chart?.setOption({
      series: [
        {
          type: "custom",
          renderItem: function (params, api) {
            const value =
              api.value(0) < 0 ? 0 : api.value(0) > 100 ? 100 : api.value(0);
            const batteryWidth =
              (value / 100) * (size[0] - lineWidth * 2 - lineWidth);
            const color =
              value < 20 ? "#FF2D2E" : value < 50 ? "#FFA63F" : "#5EFF5A";

            return {
              type: "rect",
              shape: {
                x: lineWidth,
                y: lineWidth,
                width: batteryWidth,
                height: size[1] - lineWidth * 2,
                r: 4
              },
              style: {
                fill: color
              }
            };
          },
          data: [value]
        },
        {
          type: "custom",
          renderItem: function (params, api) {
            const value =
              api.value(0) < 0 ? 0 : api.value(0) > 100 ? 100 : api.value(0);
            // const batteryWidth = value / 100 * (size[0] - lineWidth * 2 - lineWidth);
            // const color = value < 10 ? '#FF2D2E' : value < 25 ? '#FFA63F' : '#5EFF5A';
            return {
              type: "text",
              style: {
                text: `${value}%`,
                x: size[0] / 2,
                y: size[1] / 2,
                textAlign: "center",
                textVerticalAlign: "middle",
                fill: "#fff",
                font: `${fontSize}px Arial`
              }
            };
          },
          data: [value]
        }
      ]
    });
  };

  useEffect(() => {
    if (!chart) {
      initChart();
    }
  }, [domRef]);

  useEffect(() => {
    updateValue(value);
  }, [chart, value]);

  return (
    <div
      ref={domRef}
      className={classNames("size-full", className)}
      style={style}
    ></div>
  );
}
export default memo(Battery)